<template>
  <div>
    <el-col style="padding-bottom: 40px">
      <p style="font-size: 30px">奇遇大全</p>

      <el-divider/>
      <p>绝世奇遇</p>
      <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
        <el-card v-for="m in meetList.list" :key="m.dwID"
                 style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center" @click="openWin(m.szName)">
          {{ m.szName }}
        </el-card>
      </el-col>

      <el-divider/>
      <p>普通奇遇</p>
      <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
        <el-card v-for="m in meetList2.list" :key="m.dwID"
                 style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center" @click="openWin(m.szName)">
          {{ m.szName }}
        </el-card>
      </el-col>

      <el-divider/>
      <p>宠物奇遇</p>
      <el-col style="display: flex;flex-wrap: wrap;justify-content: flex-start">
        <el-card v-for="m in meetList3.list" :key="m.dwID"
                 style="width: 250px;margin-left: 15px;margin-top: 10px;text-align: center" @click="openWin(m.szName)">
          {{ m.szName }}
        </el-card>
      </el-col>
    </el-col>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="900">
      <el-col v-html="message"></el-col>
    </el-drawer>
  </div>
</template>

<script>
import {j3api} from "@/axios/j3http";

export default {
  name: "MeetPage",
  data() {
    return {
      meetList: {},
      meetList2: {},
      meetList3: {},
      message: '',
      drawer: false
    }
  },
  methods: {
    async openWin(id) {
      await j3api.search(id).then(async res => {
        console.log(res);
        await j3api.getWiki(res.data.data.achievements[0].ID).then(res => {
            this.message = res.data.data.post.content
          })
      })
      this.drawer = true
    }
  },
  mounted() {
    j3api.getMeetF(1).then(res => {
      this.meetList = res
      // console.log(res);
    })
    j3api.getMeetF(2).then(res => {
      this.meetList2 = res
    })

    j3api.getMeetF(3).then(res => {
      this.meetList3 = res
    })
    // console.log(this.meetList);
  }
}
</script>

<style scoped>

</style>
